<template>
	<view>
		<view class="status_bar"></view>
		<!-- 内容 -->
		<view class="w-1 fl-s-c p-r-30" style="padding-top: 20rpx;">
			<!-- 导航栏部分 -->
			<view class="w-1 fr-b-c" style="background: #efddb2;">
				<view class="fr-s-e" style="align-items: baseline;">
					<text style="color: #000000; font-size: 52rpx;" class="fm-ali">我要置换</text>
					<text style="color: #666666;" class="fs-32 m-l-20">规则</text>
					<view class="fr-s-e" @click="getRule" style="align-items: baseline;">
						<image src="/static/images/user/zh_look_icon.png"
							style="width: 30rpx; height: 30rpx; margin-left: 8rpx;"></image>
						<text class="fs-24 fm-ali" style="margin-left: 8rpx; color: #FA360A;">(查看)</text>
					</view>
				</view>
				<image @click="goBack" src="/static/images/user/zh_close_btn.png" style="width: 22rpx; height: 22rpx;">
				</image>
			</view>
			<block v-for="(item,index) in list" :key="index">
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==2 && item.name=='类型'">
				<text class="left-title">{{item.name}}</text>
				<picker @change="bindPickerChange($event,index)" :value="typeindex" :range="item.tp_text" class="w-1">
					<view class="p-input w-1 fr-b-c" style="height: 100rpx;">
						<text class="flex-1 text-line-1">{{typeindex==-1?'选择类型':item.tp_text[typeindex]}}</text>
						<image src="/static/images/user/down_arrow.png" class="m-l-20"
							style="width: 18rpx; height: 12rpx;"></image>
					</view>
				</picker>
			</view>
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==2 && item.name=='物品'">
				<text class="left-title">{{item.name}}</text>
				<picker @change="changeGood($event,index)"  :value="gindex" :range="item.tp_text" class="w-1">
					<view class="p-input w-1 fr-b-c" style="height: 100rpx;">
						<text class="flex-1 text-line-1">{{gindex==-1?'选择物品':item.tp_text[gindex]}}</text>
						<image src="/static/images/user/down_arrow.png" class="m-l-20"
							style="width: 18rpx; height: 12rpx;"></image>
					</view>
				</picker>
			</view>
			<!-- 手机号 -->
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==0 && item.tp_text[0].yval==1">
				<text class="left-title">手机号</text>
				<input type="number" v-model="item.val" class="my-input w-1" maxlength="11" placeholder="请输入手机号"
					placeholder-style="color: #BAB097;">
			</view>
			<!-- 身份证 -->
			<view class="fl-s-s w-1 relative m-t-50"  v-if="item.type==0 && item.tp_text[0].yval==7">
				<text class="left-title">身份证</text>
				<input type="idcard" class="my-input w-1" v-model="item.val"  maxlength="11" placeholder="请输入身份证号"
					placeholder-style="color: #BAB097;">
			</view>
			<!-- 普通 -->
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==0 && item.tp_text[0].yval==0">
				<text class="left-title">{{item.name}}</text>
				<input type="text" class="my-input w-1" v-model="item.val"  maxlength="11" placeholder="请输入"
					placeholder-style="color: #BAB097;">
			</view>
			<!-- 多行文本 -->
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==1">
				<text class="left-title">{{item.name}}</text>
				<textarea class="my-textarea w-1" v-model="item.val"  placeholder="请输入"></textarea> 
			</view>
			<!-- 物品 -->
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==5">
				<text class="left-title">{{item.name}}</text>
				<view class="goods-box w-1">
					<view class="w-1 fr-s-s" style="flex-wrap: wrap; padding-top: 40rpx;">
						<view class="chooseimage-view fr-c u-rela" v-if="imgList.length" v-for="(item,i) in imgList" :key="i">
							<video :src="item.src" v-if="item.type == 'video'" mode="aspectFill"  style="border-radius: 16rpx; width: 152rpx; height: 152rpx;"></video>
							<image @click="previewImage(i)" v-else :src="item.src" mode="aspectFill"  style="border-radius: 16rpx; width: 152rpx; height: 152rpx;"></image>
							
							<u-icon @click="delImage(i)" name="close-circle" color="#fa850a" size="40" class="u-abso"
								style="right: -20rpx; top: -20rpx; z-index: 9;"></u-icon>
						</view>
						<view class="fr-c chooseimage-view" @click="chooseImage" v-if="imgList.length<3">
							<image src="/static/images/user/choose_add.png" style="width: 50rpx; height: 50rpx;">
							</image>
						</view>
					</view>
				</view>
			</view>
			<!-- 时间选择 -->
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==11">
				<text class="left-title">{{item.name}}</text>
				<picker mode = "date" class="w-1">
					<view class="p-input w-1 fr-b-c" style="height: 100rpx;">
						<text class="flex-1 text-line-1">{{index==-1?'选择':array[index]}}</text>
						<image src="/static/images/user/down_arrow.png" class="m-l-20"
							style="width: 18rpx; height: 12rpx;"></image>
					</view>
				</picker>
			</view>
			<!-- 多选 -->
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==3">
				<text class="left-title">{{item.name}}</text>
				<view class="w-1 m-t-30 u-flex-wrap fr-s-c">
					<view class="fr-s-c m-r-20 m-b-20" v-for="(item,i) in item.tp_text" :key="i">
						<image src="/static/images/home/comment_star.png" style="width: 25rpx; height: 25rpx;"></image>
						<text class="m-l-10">{{item.yval}}</text>
					</view>
				</view>
			</view>
			<!-- 单选 -->
			<view class="fl-s-s w-1 relative m-t-50" v-if="item.type==4">
				<text class="left-title">{{item.name}}</text>
				<view class="w-1 m-t-30 u-flex-wrap fr-s-c">
					<view class="fr-s-c m-r-20 m-b-20" v-for="(item,i) in item.tp_text" :key="i">
						<image src="/static/images/home/comment_star.png" style="width: 25rpx; height: 25rpx;"></image>
						<text class="m-l-10">{{item.yval}}</text>
					</view>
				</view>
			</view>
			</block>
			<view class="fr-c sub-btn" @click="subInfo">提交</view>
		</view>
		<u-popup class="fl-s-c" border-radius="60" v-model="show" closeOnClickOverlay mode="bottom" @close="show=false">
			<view class="fl-s-c" style="margin: auto; height: 1052rpx;  width: 686rpx;">
				<view class="tabbar"></view>
				<text style="color: #000000; margin-top: 72rpx;" class="fs-32 fm-ali">置换规则</text>
				<scroll-view scroll-y class="m-t-30" style="height: 857rpx;">
					<u-parse :html="content"></u-parse>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeindex: -1,   // 类型对应的index
				gindex:-1,   // 物品对应的index
				array: ['中国', '美国', '巴西', '日本'],
				goodsarray: ['中国', '美国', '巴西', '日本'],
				show: false,
				content: '',
				list:[],
				imgList:[],
				newImgs:[]
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 获取置换规则
			getRule(){
					this.$get({
						url:'/appuser/content'
					}).then(res=>{
						this.content = res.data[0].substitution
						this.show = true
					})
			},
			// 页面信息获取
			getInfo() {
				this.$get({
					url: '/Plugin/feedback'
				}).then(res => {
					console.log(res, '+++++')
					this.list = res.data.forminfo.tp_text
				})
			},
				// 选择图片
			async chooseImage(){
				//#ifdef APP-PLUS				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')					console.log(result)				if (result !== 1) return
				this.$store.state.isCAMERA = true				// #endif
				
				let t = this
				uni.showActionSheet({
					itemList:["图片","视频"],
					success(sres){
						console.log(sres)
						if(!sres.tapIndex){
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album','camera'], //从相册选择
								success: (res) => {
									console.log(JSON.stringify(res.tempFilePaths));
									console.log(res)
									console.log("chooseImageRes.tempFilePaths[0]",res.tempFilePaths[0])

									let arr = []
									res.tempFilePaths.map(val=>{
										console.log("地址"+val)
										arr.push({
											type:"img",
											src:val
										})
									})
									console.log("图片....")
									
									console.log(arr)
									t.imgList = [...t.imgList,...arr]
									t.newImgs = [...t.newImgs,...res.tempFilePaths];
									// t.imgList = [...t.imgList,...res.tempFilePaths]
									console.log(arr)
								}
							})
						}else{
							uni.chooseVideo({
								sourceType: ['album','camera'], //从相册选择
								success: (res) => {
									t.imgList.push({
										type:"video",
										src:res.tempFilePath
									})
									t.newImgs = [...t.newImgs,...res.tempFilePath];
									
								}
							})
						}
						
					}
				})
				
			},
			previewImage(index){
				uni.previewImage({
					current:this.imgList[index],
					urls:this.imgList
				})
			},
			// 删除图片
			delImage(index){
				this.imgList.splice(index,1)
			},
			// 改变类型
			bindPickerChange: function(e,u) {
				this.typeindex = e.detail.value
				this.list[u].val = this.list[u].tp_text[this.typeindex]
			},
			// 改变物品
			changeGood(e,u) {
				console.log(u,'uuu')
				this.gindex = e.detail.value
				this.list[u].val = this.list[u].tp_text[this.gindex]
				console.log(this.list[u].val)
			},
			// 提交
			async subInfo(){
				let list = this.list 
				let valarr = list.filter(item=>item.type!=5)
				if(valarr.some(item=>item.val==''))  return this.$u.toast('请完善对应的信息');
				let imgflag = list.some(item=>item.type==5)
				if(imgflag && !this.newImgs.length) return this.$u.toast('请选择要上传的图片');
				if(imgflag){
					const imgres = await this.$up({
						imageUrl:[...this.newImgs]
					})
					// list[list.findIndex(item=>item.type==5)].z_val = JSON.stringify(imgres)
					list[list.findIndex(item=>item.type==5)].z_val = imgres
				}
				this.$get({
					url:'/Wxapps/doPageDiyForms',
					data:{
						source:1,
						forminfo:JSON.stringify(list)
					}
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						mask:true
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			}
		}
	}
</script>

<style>
	page {
		background: #efddb2;
	}
	
	.my-textarea{
		font-size: 32rpx;
		font-family: Alibaba;
		color: #BAB097;
		padding: 50rpx;
		height: 300rpx;
		background: #F5E9CD;
		border-radius: 60rpx;
		border: 2rpx solid #857E6D;
		margin-top: 30rpx;
		box-sizing: border-box;
	}

	.p-input {
		height: 92rpx;
		background: #F5E9CD;
		border-radius: 60rpx;
		border: 2rpx solid #857E6D;
		padding: 0 50rpx;
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #BAB097;
	}

	.left-title {
		font-size: 32rpx;
		font-family: Alibaba;
		color: #857E6D;
	}

	.my-input {
		font-size: 32rpx;
		font-family: Alibaba;
		color: #BAB097;
		padding: 0 50rpx;
		height: 92rpx;
		background: #F5E9CD;
		border-radius: 60rpx;
		border: 2rpx solid #857E6D;
		margin-top: 30rpx;
	}

	.goods-box {
		padding: 0 50rpx 32rpx 50rpx;
		overflow: hidden;
		background: #F5E9CD;
		border-radius: 60rpx;
		border: 2rpx solid #857E6D;
		margin-top: 30rpx;
	}

	.goods-p-input {
		height: 94rpx;
		color: #BAB097;
		font-size: 32rpx;
		font-family: Alibaba;
		border-bottom: 2rpx solid #857E6D;
	}

	.chooseimage-view {
		width: 152rpx;
		height: 152rpx;
		background: #E7DBC1;
		border-radius: 16rpx;
		margin-right: 55rpx;
	}

	.chooseimage-view:last-child {
		margin-right: 0rpx;
	}

	.sub-btn {
		width: 686rpx;
		height: 100rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
		border-radius: 50rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}

	.tabbar {
		width: 168rpx;
		opacity: 1;
		border-radius: 15rpx;
		border: 5rpx solid #999999;
		margin: 0 auto;
		margin-top: 45rpx;
	}
</style>
